<template>
  <el-container>
    <!-- 修改前-用户数据 -->
    <div
      v-show="!isEdit"
      style="
        width: 80%;
        margin: auto;
        background-color: white;
        padding: 1rem;
        margin-top: 1rem;
        border-radius: 4px;
      "
    >
      <div>
        <p style="font-size: 28px; text-align: center">用户信息</p>
      </div>
      <div :v-model="userInfo" :key="userInfo.id">
        <el-descriptions labelstyle="padding-top: 1rem">
          <el-descriptions-item label="头像">
            <el-avatar :size="50" :src="this.userHead"></el-avatar>
          </el-descriptions-item>
        </el-descriptions>

        <el-descriptions>
          <el-descriptions-item label="昵称">
            <span>
              {{ this.userInfo.nickName }}
            </span>
          </el-descriptions-item>
        </el-descriptions>

        <el-descriptions>
          <el-descriptions-item label="账号">
            <span>
              {{ userInfo.username }}
            </span>
          </el-descriptions-item>
        </el-descriptions>

        <el-descriptions>
          <el-descriptions-item label="密码">
            <span>
              {{ userInfo.password }}
            </span>
          </el-descriptions-item>
        </el-descriptions>

        <el-descriptions>
          <el-descriptions-item label="年龄">
            <span>
              {{ userInfo.age }}
            </span>
          </el-descriptions-item>
        </el-descriptions>

        <el-descriptions v-if="userInfo.sex == 1">
          <el-descriptions-item label="性别">男</el-descriptions-item>
        </el-descriptions>
        <el-descriptions v-else>
          <el-descriptions-item label="性别">女</el-descriptions-item>
        </el-descriptions>

        <el-descriptions>
          <el-descriptions-item label="手机号">
            <span>
              {{ userInfo.phone }}
            </span>
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions>
          <el-descriptions-item label="邮箱">
            <span>
              {{ userInfo.mailbox }}
            </span>
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions>
          <el-descriptions-item label="地址">
            <span>
              {{ this.site }}
            </span>
          </el-descriptions-item>
        </el-descriptions>
        <el-button type="primary" plain @click="handleEdit">编辑</el-button>
      </div>
    </div>
    ''
    <!-- 修改中-用户数据 -->
    <div
      v-show="isEdit"
      style="
        width: 80%;
        margin: auto;
        background-color: white;
        padding: 1rem;
        margin-top: 1rem;
        border-radius: 4px;
      "
    >
      <div>
        <p style="font-size: 28px; text-align: center">用户信息</p>
      </div>
      <div :v-model="userInfo" :key="userInfo.id">
        <el-descriptions labelstyle="padding-top: 1rem">
          <el-descriptions-item label="头像">
            <el-avatar :size="50" :src="this.userHead"></el-avatar>
          </el-descriptions-item>
        </el-descriptions>

        <el-descriptions>
          <el-descriptions-item label="昵称">
            <span>
              <el-input>
                {{ this.userInfo.nickName }}
              </el-input>
            </span>
          </el-descriptions-item>
        </el-descriptions>

        <el-descriptions>
          <el-descriptions-item label="账号">
            <span>
              <el-input>
                {{ userInfo.username }}
              </el-input>
            </span>
          </el-descriptions-item>
        </el-descriptions>

        <el-descriptions>
          <el-descriptions-item label="密码">
            <span>
              <el-input>
                {{ userInfo.password }}
              </el-input>
            </span>
          </el-descriptions-item>
        </el-descriptions>

        <el-descriptions>
          <el-descriptions-item label="年龄">
            <span>
              <el-input>
                {{ userInfo.age }}
              </el-input>
            </span>
          </el-descriptions-item>
        </el-descriptions>

        <el-descriptions>
          <el-radio v-model="radio" label="男">男</el-radio>
          <el-radio v-model="radio" label="女">女</el-radio>
        </el-descriptions>

        <el-descriptions>
          <el-descriptions-item label="手机号">
            <span>
              <el-input>
                {{ userInfo.phone }}
              </el-input>
            </span>
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions>
          <el-descriptions-item label="邮箱">
            <span>
              <el-input>
                {{ userInfo.mailbox }}
              </el-input>
            </span>
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions>
          <el-descriptions-item label="地址">
            <span>
              <el-input>
                {{ this.site }}
              </el-input>
            </span>
          </el-descriptions-item>
        </el-descriptions>
        <el-button type="primary" plain @click="handleSave">保存</el-button>
      </div>
    </div>
  </el-container>
</template>

<script>
import axios from 'axios'
import { GetUserOne } from "../api/home"
import { GetUserHeadPicture } from "../api/home"
// const server = axios.create({
//   timeout: 5000
// });
// server.interceptors.request.use(
//   config => {
//     return config
//   },
//   error => {
//     return error
//   }
// )

export default {
  data () {
    return {
      radio:'男',
      isEdit: false,
      userInfo: {

      },
      userHead: '',
      site:'福建省龙岩市新罗区曹溪街道闽西职业技术学院'
    }
  },
  mounted () {
    this.getUser();
    this.GetUserHead();
  },
  methods: {
    GetUserHead () {
      GetUserHeadPicture(localStorage.getItem("Id")).then(res => {
        const src = window.URL.createObjectURL(res.data);
        this.userHead = src;
      })
    },
    // 编辑时间
    handleEdit () {
      this.isEdit = !this.isEdit;
    },
    // 保存事件
    handleSave () {
      this.isEdit = !this.isEdit;
    },
    // GetUserHead () {
    //   server({
    //     url: `http://localhost:5000/HeadPortrait/${localStorage.getItem("Id")}`,
    //     method: 'get',
    //     userHead: '',
    //     responseType: 'blob'
    //   }).then(res => {
    //     const href = window.URL.createObjectURL(res.data);
    //     this.userHead = href;
    //     console.log(this.userHead);
    //   })
    // },
    getUser () {
      GetUserOne(localStorage.getItem("Id")).then((res) => {
        this.userInfo = res.data.data;
        console.log(this.userInfo);
      })
    }
  }
}
</script>
<style scoped>
.el-descriptions {
}
</style>